﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流程应用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../CCMobile/js/jquery.js" type="text/javascript"></script>
    <link href="/CCMobile/css/icons.css" rel="stylesheet" />
    <!--通用JS-->
    <script src="../CCMobile/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../CCMobile/Scripts/config.js" type="text/javascript"></script>
    <script src="../CCMobile/Comm/Gener.js" type="text/javascript"></script>

    <!--mui的引用-->
    <link href="../CCMobile/css/index2.css" rel="stylesheet" type="text/css" />
    <link href="../CCMobile/js/mui/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="../CCMobile/js/mui/js/mui.min.js" type="text/javascript"></script>
    <script src="../CCMobile/Todolist.js" type="text/javascript"></script>
    <script src="../CCMobile/Running.js" type="text/javascript"></script>
    <script src="Search.js" type="text/javascript"></script>

    <style type="text/css">
        /*body{
            font-size:15px;
        }*/
        .au-grid-box {
            display: -webkit-flex;
            display: inline-flex;
            justify-content: flex-start;
            font-size: 0.55rem;
            color: #222222;
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }

        .au-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.5rem;
            width: 3.7rem;
            height: 3.7rem;
            margin-right: 0.35rem;
        }

            .au-grid img {
                width: 1.5rem;
                height: 1.5rem;
                /*margin-bottom: 0.3rem;*/
            }

        .mui-padding {
            top: 3px !important;
            margin-left: -20px !important;
        }

        .mui-table-view:before {
            height: 0px;
        }
    </style>
    <script type="text/javascript">


        //初始化页面数据
        $(function () {

 
                $("#home").addClass("mui-active");
                $("#todolist").removeClass("mui-active");
                $("#search").removeClass("mui-active");
                $("#setting").removeClass("mui-active");

                $("#tabbar").addClass("mui-active");
                $("#tabbar-with-todolist").removeClass("mui-active");
                $("#tabbar-with-search").removeClass("mui-active");
                $("#tabbar-with-set").removeClass("mui-active");
                $("#tabbar-with-running").removeClass("mui-active");

                Home_InitPage();
        });

        function Home_InitPage() {

            //修改微信的名字，因为使用api接口获取不到名字.
            var webUser = new WebUser();
            if (webUser.No === webUser.Name || webUser.Name == "") {
                while (true) {
                    var val = promptGener('您的姓名:', webUser.No);
                    if (val == null || val == undefined || val == webUser.Name) {
                        continue;
                    }

                    var handler = new HttpHandler("BP.WF.HttpHandler.CCMobilePortal_SaaS");
                    handler.AddPara("Name", val);
                    var data = handler.DoMethodReturnString("Home_EditUserName");
                    Reload();
                    break;
                }
            }

            //4.显示流程列表
            ShowStartFlowList();

            //触发含有class au-grid的div时，发起流程
            $(".au-grid").on("tap", function () {
                var url = "../CCMobile/MyFlow.htm?FK_Flow=" + $(this).attr("data-info") + "&MyFlowFrom=home&m=" + Math.random();
                SetHref(url);
            });
        }

        /**
         * 显示能发起的流程列表
         */
        function ShowStartFlowList() {
            var handler = new HttpHandler("BP.Cloud.HttpHandler.App");
            var data = handler.DoMethodReturnString("Start_Init");
            if (data.indexOf('err@') == 0) {
                mui.alert(data);
                return;
            }
            data = JSON.parse(data);
            var Sort = data.Sort,
                Start = data.Start;
            Sort.forEach(function (sort) {
                if (sort.Name == "" || sort.Name == null)
                    return;
                var _html = "";
                var html = "";
                var isHaveFlow = false;
                Start.forEach(function (item) {

                    if (item.FK_FlowSort == sort.No && item.IsStartInMobile == "1") {
                        var iconObj = new Object();
                        if (item.ICON.indexOf('@') >= 0) { //包含@符号，是按照规则组装的数据
                            iconObj = item.ICON.split("@");
                        }
                        _html += '<div class="au-grid" style="margin-top:0.5rem" data-info="' + item.No + '">';
                        _html += '<div >';
                        _html += "<img src = '/App/FlowDesigner/FlowIcon/" + (iconObj == undefined ? "" : iconObj[0]) + ".png' class='" + (iconObj == undefined ? "" : iconObj[1]) + "' onerror=\"nofind();\" ' />";
                        _html += '</div>';
                        _html += '<div>' + item.Name + '</div>';
                        _html += '</div>';
                        isHaveFlow = true;

                    }

                });
                if (isHaveFlow) {
                    html = '<li class="mui-table-view-cell mui-media">';
                    html += '<div><span style="padding: 0.28rem;font-weight: bold;">' + sort.Name + '</span></div>';
                    html += '<div class="au-grid-box">';
                    html += _html;
                    html += '</div>';
                    html += '</li>';
                    $("#FlowList").append(html);
                }
            });
        }

        function ToUrl(doType) {
            Running_InitPage(doType);
            $("#tabbar").removeClass("mui-active");
            $("#tabbar-with-running").addClass("mui-active");
        }
        function nofind() {
            var img = event.srcElement;
            img.src = "/App/FlowDesigner/AppTemplate/DefaultIcon.png";
        }
    </script>
</head>
<body>
    <!--header-->
    <!--<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">首页</h1>
    </header>-->
    <!--底部-->
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="#tabbar" id="home">
            <span class="mui-icon mui-icon-paperplane"></span>
            <span class="mui-tab-label">发起</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-todolist" id="todolist">
            <span class="mui-icon mui-icon-email"><span class="mui-badge" id="EmpWorks_Count">0</span></span>
            <span class="mui-tab-label">待办</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-search" id="search">
            <span class="mui-icon mui-icon-search"></span>
            <span class="mui-tab-label">查询</span>
        </a>
        <a class="mui-tab-item" href="#tabbar-with-set" id="setting">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper" id="scroll">
        <!-- 首页 -->
        <div id="tabbar" class="mui-control-content mui-active">
            <div class="mui-content">
                <!--流程列表-->
                <div class="title" style="height:0.7rem"></div>
                <ul class="mui-table-view" id="FlowList"></ul>
            </div>
        </div>

        <!--待办-->
        <div id="tabbar-with-todolist" class="mui-control-content">
            <section class="mui-content">
                <div class="au-bg-white">
                    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                        <a class="mui-control-item tab-item mui-active" id="todolist" href="#item_todolist" data-index="0">
                            待处理的<span class="mui-badge mui-badge-danger au-m-l-8" id="Todolist_EmpWorks">0</span>
                        </a>
                        <a class="mui-control-item tab-item" id="running" href="#item_running" data-index="1">
                            已处理的<span class="mui-badge mui-badge-danger au-m-l-8" id="Todolist_Runnings">0</span>
                        </a>
                        <a class="mui-control-item tab-item" id="complete" href="#item_cc" data-index="2">
                            抄送给我的<span class="mui-badge mui-badge-danger au-m-l-8" id="Todolist_CCs">0</span>
                        </a>
                    </div>
                </div>
                <div class="tab-box">
                    <!--待办-->
                    <div id="item_todolist" class="mui-control-content  mui-active"></div>
                    <!--已处理-->
                    <div id="item_running" class="mui-control-content"></div>
                    <!--抄送给我的-->
                    <div id="item_cc" class="mui-control-content"></div>
                </div>
            </section>
        </div>

        <!--我发起的流程-->
        <div id="tabbar-with-running" class="mui-control-content">
            <section class="mui-content">
                <div class="au-bg-white">
                    <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                            <a class="mui-control-item tab-item" id="myRunning" href="#item_my_running" data-index="1">
                                处理中
                            </a>
                            <a class="mui-control-item tab-item" id="myComplete" href="#item_my_complete" data-index="2">
                                已完成
                            </a>
                            <a class="mui-control-item tab-item" id="draflist" href="#item_my_draflist" data-index="0">
                                草稿
                            </a>
                        </div>
                    </div>
                </div>
                <div class="tab-box">
                    <!--处理中-->
                    <div id="item_my_running" class="mui-control-content"></div>
                    <!--已完成-->
                    <div id="item_my_complete" class="mui-control-content"></div>
                    <!--草稿-->
                    <div id="item_my_draflist" class="mui-control-content"></div>
                </div>
            </section>
        </div>
        <!--查询页面-->
        <div id="tabbar-with-search" class="mui-control-content">
            <div class="mui-scroll">
                <div>
                    <!--Search查询框-->
                    <div class="mui-input-row mui-search" style="margin:5px;float:left;width:85%">
                        <input type="search" id="SearchKey" class="mui-input-clear" placeholder="" style="background-color:white">
                    </div>
                    <!--条件筛选框-->
                    <div class="" style="margin-top:8px;float:left;">
                        <a id="offCanvasBtn" class="mui-icon mui-action-menu mui-icon-bars " style="color:#8F8F94"></a>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div class="tab-box">
                    <!--处理中-->
                    <div id="datalist" class=""></div>
                </div>
            </div>
        </div>
        <!--查询条件-->
        <div id="tabbar-with-searchCondtion" class="mui-control-content">
            <div class="mui-scroll">
                <section class="screen">
                    <div class="top">筛选</div>
                    <div class="hd">
                        <div class="title">时间段</div>
                        <div class="list1">
                            <input class="button" name="TSPan" id="TSPan_3" type="button" value="全部" onclick="setTSpan(this.value)">
                            <input class="button" name="TSPan" id="TSPan_0" type="button" value="本周" onclick="setTSpan(this.value)">
                            <input class="button" name="TSPan" id="TSPan_1" type="button" value="上周" onclick="setTSpan(this.value)">
                            <input class="button" name="TSPan" id="TSPan_2" type="button" value="上上周" onclick="setTSpan(this.value)">

                        </div>
                    </div>

                    <div class="bd">
                        <div class="title">流程状态</div>
                        <div class="list1">
                            <input class="button" name="WFState" id="WFState_all" type="button" value="全部" onclick="setWFState(this.value)">
                            <input class="button" name="WFState" id="WFState_1" type="button" value="草稿" onclick="setWFState(this.value)">
                            <input class="button" name="WFState" id="WFState_2" type="button" value="运行中" onclick="setWFState(this.value)">
                            <input class="button" name="WFState" id="WFState_3" type="button" value="退回" onclick="setWFState(this.value)">
                            <input class="button" name="WFState" id="WFState_5" type="button" value="完成" onclick="setWFState(this.value)">

                        </div>

                        <div class="title" style="padding-top:4%;">按时间</div>
                        <div class="j">
                            <input class="txt" placeholder="开始时间" type="text">
                            <input class="txt" placeholder="结束时间" type="text">
                            <div class="line"></div>
                        </div>

                    </div>

                    <div class="ft">

                        <input class="submit" type="submit" value="确定" id="offCanvasHide">
                        <input class="reset" type="reset" value="重置" id="Reset">

                    </div>


                </section>


            </div>
        </div>
    </div>
</body>
</html>
